<template>
  <div class="div" ref="div">
    
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted,ref,reactive} from 'vue'

import {getwork} from '../../request/index'


var color = ['#FC4567', '#2F8DF4', '#C25EC4','#00ff7d','#fbd749',]
const option=reactive({
    color: color,
    backgroundColor: '#0A173B',
    series: [{
        type: 'pie',
        roseType: 'radius',
        radius: ['30%', '60%'],
        data:null,
        label: {
            normal: {
                formatter: '{font|{c}}\n{hr|}\n{font|{d}%}',
                rich: {
                    font: {
                        fontSize: 20,
                        padding: [5, 0],
                        color: '#fff'
                    },
                    hr: {
                        height: 0,
                        borderWidth: 1,
                        width: '100%',
                        borderColor: '#fff'
                    }
                }
            },
        },
        labelLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        }
    }]
})
const div=ref()
let myChart 
onMounted(()=>{
        getwork().then(res=>{
            myChart=echarts.init(div.value)
            console.log('毕业生工作状态',res.data.data.list);
            option.series[0].data=res.data.data.list
              myChart.setOption(option)
        })
    
  


})
  window.addEventListener('resize', function() {
    myChart.resize();
  });


</script>

<style scoped>
.div{
   width: 99%;  
  height: 91%;
}
</style>